import BaseChart from '../../BaseChart.js'
export default class AreaBarChart extends BaseChart {

  constructor(id, data) {
    super(id, data);

    this.xAxisKey = 'x';
    this.yAxisKey = 'y';
    this.yAxisTitle = 'title';

    this.xAxis = null;
    this.xAxisGroup = null;

    this.yAxis = null;
    this.yAxisGroup = null;

    this.rectGroup = null;
    this.color = 'red';
  }

  /**
   * @description: 设置x轴数据的字段名
   * @param {x轴的key} 
   * @return {当前对象} 
   */
  setXAxisKey(k) {
    this.xAxisKey = k;
    return this;
  }
  /**
   * @description: 设置y轴数据的字段名
   * @param {y轴的key} 
   * @return {当前对象} 
   */
  setYAxisKey(k) {
    this.yAxisKey = k;
    return this;
  }
  /**
   * @description: 设置y轴标题
   * @param {type} 
   * @return {type} 
   */
  setYAxisTitle(title) {
    this.yAxisTitle = title;
    return this;
  }

  init() {
    this.initSvg();
    this.initMainGroup();
    this.initAxes();
    this.initAreaGroup();
    return this;
  }

  initAxes() {
    this.xAxisGroup = this.svg.append('g')
      .attr('id', `${this.id}xAxis`)
      .attr('transform', `translate(${this.margin.left},${this.margin.top + this.innerHeight})`);

    this.yAxisGroup = this.svg.append('g')
      .attr('id', `${this.id}yAxis`)
      .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
  }

  initAreaGroup() {
    this.pathGroup = this.mg.append("g");
  }

  /**
   * @description: 更新视图
   * @param {type} 
   * @return {type} 
   */
  render(data) {
    if (data) {
      this.data = data;
    }
    this.renderScale();
    this.renderAxes();
    this.renderPath();
    return this;
  }

  renderPath() {
    console.log(this.data);
    this.path = this.pathGroup
      .selectAll('path')
      .data([this.data])
      .join("path")
      .attr('fill', 'steelblue')
      .transition()
      .attr("d", d3.area()
        .curve(d3.curveLinear)
        .x(d => this.xAxis(new Date(d[this.xAxisKey])))
        .y0(this.yAxis(0))
        .y1(d => this.yAxis(+d[this.yAxisKey]))
      );
  }

  /**
   * @description:更新比例尺 
   * @param {type} 
   * @return {type} 
   */
  renderScale() {
    this.xAxis = d3.scaleUtc()
      .domain(d3.extent(this.data, d => new Date(d[this.xAxisKey])))
      .range([0, this.innerWidth])

    this.yAxis = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => +d[this.yAxisKey])])
      .nice()
      .range([this.innerHeight, 0]);
  }

  /**
   * @description: 更新坐标轴
   * @param {type} 
   * @return {type} 
   */
  renderAxes() {
    this.xAxisGroup.transition()
      .call(d3.axisBottom(this.xAxis).ticks(this.innerWidth / 80).tickSizeOuter(0))

    this.yAxisGroup.transition()
      .call(d3.axisLeft(this.yAxis).ticks(null, "s"))

    this.yAxisGroup.call(g => g.select(".domain").remove())
      .call(g => {
        g.select(`#${this.id}YAxisTitle`).remove()
      })
      .call(g => {
        g.select(".tick:last-of-type text")
          .clone()
          .attr(`id`, `${this.id}YAxisTitle`)
          .attr("x", 3)
          .attr("text-anchor", "start")
          .attr("font-weight", "bold")
          .text(this.yAxisTitle)
      })
  }
}